<%@page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<link href="${apliPath}static/css/default.css" rel="stylesheet"
	type="text/css" />
<link rel="stylesheet" type="text/css"
	href="${apliPath}static/js/themes/metro-solidBlue/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="${apliPath}static/js/themes/icon.css" />
<script type="text/javascript"
	src="${apliPath}static/js/jquery-1.10.2.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${apliPath}static/js/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function() {
		$("#manageAlbum")
				.datagrid(
						{
							title : "专辑列表",
							fit : true,
							border : false,
							toolbar : '#toolBar',
							iconCls : 'icon-search',
							url : "${apliPath}album/queryAlbumsByPage",
							fitColumns : true,
							checkOnSelect : true,
							singleSelect : false,
							ctrlSelect : true,
							striped : true,
							loadMsg : "数据正在加载中，请稍等...",
							columns : [ [
									{
										field : "id",
										checkbox : true,
									},
									{
										title : "标题",
										field : "title",
										width : 100,
									},
									{
										title : "评分",
										field : "score",
										width : 70,
										sortable : true,
									},
									{
										title : "发布日期",
										field : "createDate",
										width : 70,
									},
									{
										title : "演唱",
										field : "broadcast",
										width : 100,
									},
									{
										title : "作者",
										field : "mentor",
										width : 80,
										formatter : function(value, row, index) {
											return row.mentor.mentorName;
										}
									},
									{
										title : "查看章节",
										field : "opt2",
										width : 80,
										formatter : function(value, row, index) {
											return '<a class="" onclick="modifyChapter('
													+ index
													+ ')" href="javascript:void(0)">查看章节</a>';
										}
									},
									{

										title : "编辑操作",
										field : "opt",
										width : 80,
										formatter : function(value, row, index) {
											return '<a class="delcls" onclick="delAlbum('
													+ row.id
													+ ')" href="javascript:void(0)"></a><a class="modifyAlbumcls" onclick="modifyAlbum('
													+ index
													+ ')" href="javascript:void(0)"></a>';
										}

									} ] ],
							onLoadSuccess : function(data) {
								$('#manageAlbum').datagrid('hideColumn', 'opt');
								<shiro:hasAnyPermission name='fun:album:del,fun:album:upd'>
								$('#manageAlbum').datagrid('showColumn', 'opt');
								</shiro:hasAnyPermission>
								<shiro:hasPermission name='fun:album:del'>
								$('.delcls').linkbutton({
									text : '删除',
									plain : true,
									iconCls : 'icon-edit'
								});
								</shiro:hasPermission>
								<shiro:hasPermission name='fun:album:upd'>
								$('.modifyAlbumcls').linkbutton({
									text : '更新',
									plain : true,
									iconCls : 'icon-edit'
								});
								</shiro:hasPermission>
							},
							pagination : true,
							pageSize : 6,
							pageList : [ 3, 6, 9, 12 ],
							sortName : "score",
							sortOrder : "DESC",
							remoteSort : false,
						});

	});

	function modifyAlbum(index) {
		var rows = $("#manageAlbum").datagrid("getRows");
		var value = document.createTextNode(rows[index].summary);
		$('#thumbnailChangeFlag').val('NOCHANGE');
		document.getElementById('textAreaSummary').innerHTML = '';
		document.getElementById('textAreaSummary').appendChild(value);
		if (rows[index].thumbnail != 'NOIMAGE') {
			document.getElementById("albumPicture").setAttribute(
					"src",
					"${apliPath}static/file/album/" + rows[index].title
							+ "/icon/" + rows[index].thumbnail);
		}
		$
				.get(
						"${apliPath}mentor/queryMentorsByPage?page=1&rows=100&sort=id&order=desc",
						function(data) {
							var localData = data.rows;
							$('#mentorComobo').combobox({
								data : localData,
								valueField : 'id',
								textField : 'mentorName'
							});
							$('#mentorComobo').combobox('select',
									rows[index].mentor.id);
						});
		$("#modifyAlbumWindow").form('load', {
			id : rows[index].id,
			title : rows[index].title,
			setCount : rows[index].setCount,
			score : rows[index].score,
			thumbnail : rows[index].thumbnail,
		});
		var selectStatus = document.getElementById("useStatus");
		selectStatus.innerHTML = "";
		var option = document.createElement("option");
		option.value = "0";
		var value1 = document.createTextNode("可用");
		option.appendChild(value1);
		selectStatus.appendChild(option);
		var option2 = document.createElement("option");
		option2.value = "1";
		var value2 = document.createTextNode("不可用");
		option2.appendChild(value2);
		selectStatus.appendChild(option2);
		for (var i = 0; i < selectStatus.options.length; i++) {
			if (selectStatus.options[i].value == rows[index].useStatus) {
				selectStatus.options[i].selected = true;
			}
		}
		$("#modifyAlbumWindow").window('open');
	}
	function modifyChapter(index) {
		var rows = $("#manageAlbum").datagrid("getRows");
		var albumName = rows[index].title;
		var albumID = rows[index].id;
		$("#manageChapterWindow").window({
			height : 480,
			width : 600,
			openAnimation : "slide",
			maximized : false,
			left : "45%",
			zIndex : 5,
			top : 30,
		});

		$("#manageChapter")
				.datagrid(
						{
							top : 50,
							border : false,
							toolbar : 'toolBar',
							iconCls : 'icon-search',
							url : "${apliPath}chapter/queryChaptersByPage?album_id="
									+ rows[index].id,
							fit : true,
							fitColumns : true,
							striped : true,
							singleSelect : true,
							loadMsg : "数据正在加载中，请稍等...",
							columns : [ [
									{
										title : "ID",
										field : "id",
										width : "10%",
									},
									{
										title : "标题",
										field : "title",
										width : "40%",
									},
									{
										title : "下载次数",
										field : "downloadTimes",
										sortable : true,
										width : "10%",
									},
									{
										title : "时长",
										field : "duration",
										width : "10%",
									},
									{
										title : "编辑操作",
										field : "opt",
										width : "20%",
										formatter : function(value, row, index) {
											return '<a class="delcls" onclick="delChapter('
													+ index
													+ ')" href="javascript:void(0)"></a><a class="downloadcls" href="${apliPath}chapter/download/'+albumID+'/'+row.id+"/"
													+albumName+"/"+row.downloadUrl
													+'"></a>';
										}

									} ] ],
							onLoadSuccess : function(data) {
								$('.delcls').linkbutton({
									text : '删除',
									plain : true,
									iconCls : 'icon-edit'
								});
								$('.downloadcls').linkbutton({
									text : '下载',
									plain : true,
									iconCls : 'icon-edit'
								});
							},
							pagination : true,
							pageSize : 6,
							pageList : [ 3, 6, 9, 12 ],
							sortName : "downloadTimes",
							sortOrder : "DESC",
							remoteSort : false,
						});
		$("#manageChapterWindow").window('open');

	}
	function delAlbum(index) {
		$.messager.confirm('确认', '您确认想要删除专辑吗？', function(r) {
			if (r) {
				var transData = {
					drop : index,
				};
				$.post("${apliPath}album/drop", transData, function(data) {
					$.messager.show({
						title : "提示框",
						msg : "已经删除",
					});
					$("#manageAlbum").datagrid("reload");
				});
			} else {
				alert("幸亏你没有删除");
			}
		});

	}
	function delChapter(index) {
		var rows = $("#manageChapter").datagrid("getRows");
		$.post("${apliPath}chapter/drop", {
			id : rows[index].id,
		}, function(data) {
		});
		$("#manageChapter").datagrid("reload");
	}
	function modifyAlbumSubmit() {
		var textAreaSummary = document.getElementById("textAreaSummary").innerHTML;
		document.getElementById("summary").value = textAreaSummary;
		$("#modifyAlbumForm").form('submit', {
			url : "${apliPath}album/modify",
			success : function(data) {
				$("#modifyAlbumWindow").window('close');
				$.messager.show({
					title : "提示框",
					msg : "修改成功",
				});
				$("#manageAlbum").datagrid("reload");
			}
		});
	}
</script>

<table id="manageAlbum">
</table>

<div id="toolBar" style="float: right">
	<table>
		<tr>
			<td><a href="javascript:void(0)" class="easyui-linkbutton"
				data-options="iconCls:'icon-cancel',plain:true"> 删除</a></td>
			<td><span style="font-size:12px">查询管理</span>&nbsp;<input
				type="text" value="想多删？多点几次试试。。" /></td>
		</tr>
	</table>
</div>
<div id="modifyAlbumWindow" class="easyui-window" title="专辑信息"
	data-options="closed:true,maximizable:false,minimizable:false,draggable:false,resizable:false,collapsible:false,onClose: function(){
		            $('#modifyAlbumForm').form('reset');
		            removePicture();
				}"
	style="width:600px;height:500px;padding:5px;top: 20">
	<div class="easyui-layout" data-options="fit:true,border:false">
		<div data-options="region:'east',border:false" style="width:250px">
			<form method="post" id="modifyAlbumForm"
				enctype="multipart/form-data">
				<input type="hidden" id="summary" name="summary"> <input
					type="hidden" name="id"> <input type="hidden"
					name="thumbnail"> <input type="hidden"
					name="thumbnailChangeFlag" id="thumbnailChangeFlag">
				<table border="0" cellpadding="0" cellspacing="0"
					style="margin-top: 10">
					<tr>
						<td colspan="2"><h2>专辑图片：</h2></td>
					</tr>
					<tr>
						<td align="center" style="height: 28">
							<div id="div_addPic"
								style="width:65px;height:20px;margin-top:4px;background-image:url(${apliPath}static/images/addPic_out.png)">
								<input type="file" id="imageFile" name="thumbnailImg"
									style="width:81;filter:alpha(opacity=0);opacity:0;" width="81"
									onchange="change('albumPicture','imageFile')">
							</div>
						</td>
						<td align="center">
							<div
								style="width:65px;height:20px;margin-top:4px;background-image:url(${apliPath}static/images/removePic_out.png)">
								<input style="width:81;filter:alpha(opacity=0);opacity:0;"
									width="81" onclick="removePicture()" type="button">
							</div>
						</td>
					</tr>
					<tr>
						<td colspan="2"><img id="albumPicture"
							style="height:185;width:220;object-fit:cover;"></td>
					</tr>
					<tr style="height: 28">
						<td align="center">标题：</td>
						<td><input type="text" name="title" readonly="readonly"></td>
					</tr>
					<tr style="height: 28">
						<td align="center">数量：</td>
						<td><input type="text" name="setCount"></td>
					</tr>
					<tr style="height: 28">
						<td align="center">评分：</td>
						<td><input type="text" name="score"></td>
					</tr>
					<tr style="height: 28">
						<td align="center">可用状态：</td>
						<td><select name="useStatus" id="useStatus">
						</select></td>
					</tr>
					<tr style="height: 28">
						<td align="center">作者：</td>
						<td><input id="mentorComobo" name="mentor.id"
							class="easyui-combobox" /></td>
					</tr>
				</table>
			</form>
		</div>
		<div>
			<h2>专辑简介</h2>
			<div style="width: 260px">
				<textarea id="textAreaSummary" rows="24" cols="48">这里是专辑简介</textarea>
			</div>
		</div>
		<div data-options="region:'south',border:false"
			style="text-align:right;padding:5px 0 5px 0;">
			<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'"
				href="javascript:void(0)" onclick="modifyAlbumSubmit()"
				style="width:80px">存起来</a> <a class="easyui-linkbutton"
				data-options="iconCls:'icon-cancel'" href="javascript:void(0)"
				onclick="javascript:$('#modifyAlbumWindow').window('close')"
				style="width:80px">先取消</a>
		</div>
	</div>
</div>
<div id="manageChapterWindow" class="easyui-window" title="章节列表"
	style="top: 30"
	data-options="closed:true,closed:true,maximizable:false,minimizable:false,draggable:false,resizable:false,collapsible:false">
	<h2>专辑章节列表-音频</h2>
	<div style="height:400px">
		<div class="easyui-datagrid" id="manageChapter"></div>
	</div>
</div>
<script type="text/javascript">
	function change(picId, fileId) {
		$('#thumbnailChangeFlag').val('ALCHANGE');
		var pic = document.getElementById(picId);
		var file = document.getElementById(fileId);
		var reallocalpath = "";
		if (window.FileReader) {// chrome,firefox7+,opera,IE10,IE9，IE9也可以用滤镜来实现
			oFReader = new FileReader();
			oFReader.readAsDataURL(file.files[0]);
			oFReader.onload = function(oFREvent) {
				pic.src = oFREvent.target.result;
			};
		} else if (document.all) {// IE8-
			reallocalpath = file.value;
			file.select();
			window.top.document.body.focus();
			// file.blur(); 执行该方法 会取消选中
			if (document.selection.createRange().text.length != 0
					&& document.selection.createRange().text != "") {
				reallocalpath = document.selection.createRange().text;
			}
			if (window.ie6) {
				pic.src = reallocalpath; // IE6浏览器设置img的src为本地路径可以直接显示图片
			} else { // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现，IE10浏
				// 览器不支持滤镜，需要用FileReader来实现，所以注意判断FileReader先
				pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\""
						+ reallocalpath + "\")";
				pic.src = '';// 设置img的src为base64编码的透明图片，要不会显示红xx
			}
		} else if (file.files) {// firefox6-
			if (file.files.item(0)) {
				url = file.files.item(0).getAsDataURL();
				pic.src = url;
			}
		}
	}
	function removePicture() {
		$('#thumbnailChangeFlag').val('ALCHANGE');
		var file = document.getElementById("imageFile");
		if (file.outerHTML) {
			file.outerHTML = file.outerHTML;
		} else { // FF(包括3.5)
			file.value = "";
		}
		document.getElementById("albumPicture").removeAttribute('src');
		$("#albumPicture").css("filter", "");
	}
</script>






